<template>
  <MrCustom bg-color="bg-gradual-blue" is-back/>

  <view v-if="process===0">
    <view class="bg-white   padding-tb">
      <view class="cu-steps">
        <view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
          <text class="num" data-index="{{index + 1}}"></text>
          {{ item.name }}
        </view>
      </view>
    </view>
    <view v-if="archiveInfo" style="padding-bottom: 10vh">
      <view v-for="(item,index) in numList" :key="index">
        <view v-if="index-1===num">
          <view v-for="(it,id) in item.value" :key="id">
            <view class="bg-white margin-top padding">
              <MrCheckBox v-model:value="archiveInfo[it.key]"
                          :options="it.options"
                          :title="it.title"
                          :desc="it.desc"></MrCheckBox>
            </view>
          </view>
        </view>
      </view>
      <view v-if="num+1===numList.length">
        <view class="margin-tb-sm padding-top-lg padding-bottom-xl">
          <view class="flex justify-center text-xsl">
            <view class="cuIcon-evaluate text-gray icon"></view>
          </view>
          <view class="flex justify-center padding-top-sm">
            <view class="text-gray text">完成</view>
          </view>
        </view>
      </view>
    </view>
    <view class="cu-bar foot bg-white padding-lr">
      <view class="flex flex-sub justify-between">
        <view class="flex flex-sub flex-direction">
          <button class="cu-btn bg-blue light lg radius" @click="last">上一步</button>
        </view>
        <view class="flex flex-sub flex-direction">
          <button v-if="num!==numList.length-1" class="cu-btn bg-blue lg radius" @click="next">下一步</button>
          <button v-else class="cu-btn bg-blue lg radius" @click="submit">提交</button>
        </view>
      </view>
    </view>
  </view>
  <view v-else>
    <view class="bg-white padding">
      <view class="flex flex-sub justify-between align-center">
        <view class="text-blue">健康史</view>
        <view class="text-lg">完成度{{ (process / numList.length * 100).toFixed(0) }}%</view>
      </view>
      <view class="text-lg text-gray margin-top-xs">
        健康史是指生活中发生的主要健康事件（过敏，手术等）
      </view>
    </view>

    <view>
      <view v-for="(item,index) in numList" :key="index">
        <view class="bg-white padding margin-xs radius-lg">
          <view class="flex flex-sub justify-between">
            <view>
              <text class="text-xxl">{{ item.name }}</text>
              <text class="margin-left-xs text-lg">完成度{{ (item.progress / item.value.length * 100).toFixed(0) }}%</text>
            </view>
            <view >
              <button v-if="item.progress===0" @click="toAdd(item)" class="cu-btn cuIcon-add text-xl line-blue bg-blue">
                新增
              </button>
              <button v-else @click="toAdd(item)" class="cu-btn cuIcon-edit text-xl line-blue bg-blue">
                编辑
              </button>
            </view>
          </view>
          <view class="text-lg text-gray margin-top-xs">
            {{ item.desc }}
          </view>
          <view v-if="item.progress!==0"
                class="flex flex-sub flex-direction bg-blue light padding radius-lg  margin-xs">
            <view v-for="(it,id) in item.value" :key="id">
              <text v-if="archiveInfo[it.key]!=null">
                {{getResultText(archiveInfo[it.key],it.title)}}。
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">

import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import MrCustom from "@/components/common/MrCustom.vue";
import MrCheckBox from "@/components/common/MrCheckBox.vue";
import api from "@/api";

const numList = ref([
  {
    name: '既往史',
    desc: '既往史是指一个人既往的健康状况的记录',
    progress: 0,
    value: [
      {
        key: 'pastDisease',
        title: '慢性病史或其他病史',
        desc: '您是否患有重症疾病或其他慢性疾病?',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
      {
        key: 'pastOperation',
        title: '手术史',
        desc: '您是否有手术史？',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
      {
        key: 'pastInfectiousDisease',
        title: '传染病史',
        desc: '您是有传染病史？',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
      {
        key: 'pastBloodTransfusion',
        title: '输血史',
        desc: '您是否曾接受过输血？',
        options: [
          {
            label: '是',
            value: '是',
            isInput: false,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
      {
        key: 'pastVaccines',
        title: '疫苗史',
        desc: '您接种过哪些疫苗？',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
    ],

  },
  {
    name: '个人史',
    desc: '个人史是对生活习惯等健康问题的记录',
    progress: 0,
    value: [
      {
        key: 'personalOccupation',
        title: '职业',
        desc: '您目前的职业状况是?',
        options: [
          {
            label: '在业',
            value: '',
            isInput: true,
          },
          {
            label: '无业/失业',
            value: '无业/失业',
            isInput: false,
          }]
      },
      {
        key: 'personalSmoke',
        title: '吸烟史',
        desc: '您是否有吸烟的习惯?',
        options: [
          {
            label: '是',
            value: '是',
            isInput: false,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          },
          {
            label: '已戒烟',
            value: '已戒烟',
            isInput: false,
          }]
      },
      {
        key: 'personalDrink',
        title: '饮酒史',
        desc: '您是否有饮酒的习惯?',
        options: [
          {
            label: '是',
            value: '是',
            isInput: false,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          },
          {
            label: '已戒酒',
            value: '已戒酒',
            isInput: false,
          }]
      },
    ]
  },
  {
    name: '家族史',
    desc: '家族史是指某些疾病在家族成员中发病情况',
    progress: 0,
    value: [
      {
        key: 'familyDisease',
        title: '家族史',
        desc: '您是否有家人有重症病或慢性疾病病史',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
    ]
  },
  {
    name: '婚育史',
    desc: '婚育史是指一个人结婚与生育等相关信息',
    progress: 0,
    value: [
      {
        key: 'marriage',
        title: '婚姻史',
        desc: '你的婚姻状况是？',
        options: [
          {
            label: '已婚',
            value: '已婚',
            isInput: false,
          },
          {
            label: '未婚',
            value: '未婚',
            isInput: false,
          }]
      },
      {
        key: 'childbirth',
        title: '生育史',
        desc: '您是否有孕育史？',
        options: [
          {
            label: '是',
            value: '是',
            isInput: false,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },

    ]
  },
  {
    name: '过敏史',
    desc: '过敏史是指一个人对某些过敏原过敏的情况',
    progress: 0,
    value: [
      {
        key: 'allergyFood',
        title: '食物过敏史',
        desc: '您是否有食物过敏史？',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
      {
        key: 'allergyMedicine',
        title: '药物过敏史',
        desc: '您是否有药物过敏史？',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
      {
        key: 'allergyContact',
        title: '接触过敏史',
        desc: '您是否有接触过敏史 ？',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
    ]
  }
])
const num = ref(-1)
const archiveInfo = ref()
const process = ref(0)

onLoad((option) => {
  archiveInfo.value = JSON.parse(decodeURIComponent(option.archiveInfo))
  if (archiveInfo.value.sex === '女') {
    numList.value.push({
      name: '月经史',
      desc: '月经史是指妇女行经的相关情况',
      progress: 0,
      value: [
        {
          key: 'mensesFirstYear',
          title: '月经初潮',
          desc: '您第一次来月经是几岁？',
          options: [
            {
              label: '填写',
              value: '',
              isInput: true,
            }
          ]
        },
        {
          key: 'mensesLastDate',
          title: '上次月经日期',
          desc: '您上次月经是什么时候？',
          options: [
            {
              label: '填写',
              value: '',
              isInput: true,
            }
          ]
        },
        {
          key: 'mensesCycle',
          title: '月经周期',
          desc: '您的月经隔多久来？',
          options: [
            {
              label: '填写',
              value: '',
              isInput: true,
            }
          ]
        },
        {
          key: 'mensesDayNum',
          title: '经期天数',
          desc: '您的经期持续几天？',
          options: [
            {
              label: '填写',
              value: '',
              isInput: true,
            }
          ]
        },
      ],

    })
  }
  getProcess()
})
const getProcess = () => {
  numList.value.forEach(item => {
    let cnt = 0
    item.value.forEach(it => {
      if (archiveInfo.value[it.key] !== null) {
        cnt++
      }
    })
    item.progress = cnt
    if (cnt !== 0) {
      process.value++
    }
  })
}
const getResultText =(value:any,text:any)=>{
  if(value==="否"){
    return "没有"+text
  }else if(value==="是"){
    return "有"+text
  }else{
    return value
  }
}

const last = () => {
  if (num.value !== -1) {
    num.value--
  }

}
const next = () => {
  console.log(archiveInfo.value)
  if (num.value !== numList.value.length - 1) {
    num.value++
  }
}
const submit = () => {
  api.archive.setHealth({
    ...archiveInfo.value
  }).then(res => {
    if (res && res.data.code === 0) {
      uni.navigateBack({
        success: () => {
          uni.showToast({
            title: res.data.msg
          })
        }
      })
    }
  })
}

const toAdd = (item: any) => {
  uni.navigateTo({
    url: '/pages/common/archive/health/update?archiveInfo=' + encodeURIComponent(JSON.stringify(archiveInfo.value))
        + '&numItem=' + encodeURIComponent(JSON.stringify(item))
  })

}


</script>

<style scoped>

</style>